<template>
  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <!-- 监听这个启的类名，只要它执行 函数add也执行 -->
    <TodoHeader @addTodoName="add" ></TodoHeader>
    <!-- 列表区域 -->
    <!-- 数据加载给Main -->
    <TodoMain :list="list" @sendId='delList'></TodoMain>
    <!-- 统计和清空 -->
    <TodoFooter :list="list" v-show="list.length>0" @clearList="clear" ></TodoFooter>
  </section>
</template>

<script>
// 引入到公共组件
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
 data(){
  return{
    list: JSON.parse(localStorage.getItem('list')) ||[
     {id:1,name:'跑步一公里'},
      {id:2,name:'唱跳'}
    ]
  }
 },
//  注册  分支组件
 components:{
  TodoHeader,
  TodoMain, 
  TodoFooter 
 },
 watch:{
  list:{
    deep:true,
    handler(value){
      localStorage.setItem('list',JSON.stringify(value))
    }
  }
 },
 methods:{
  // 设置形参 ，把携带的值传入
  add(value ){
this.list.unshift({
  id:+new Date(),
  name:value
})
  },
  // 记得传id
  delList(id){
this.list=this.list.filter(item=>item.id!==id)
  },
  clear(){
    this.list=[]
  }
 },
 
};
</script>

<style>
</style>